<!-- html代码 -->
<template>
  <div>
    <!-- 1.提供地图容器 -->
    <div ref="map" style="height:100%;"></div>
  </div>
</template>
<script>
import {get} from '@/utils/request'
import {mapMutations,mapState} from 'vuex';
export default {
  data() {
    return {
      // 存放设备信息数组
      empData:[]
    }
  },
  computed:{
    ...mapState(['ed'])
  },
  methods: {
    ...mapMutations(['SET_ED']),
    // 加载地图方法
    loadMap() {
      AMapLoader.load({
        key: "bcb5a1c9a339a3a909c566c91dd5b589", //申请好的Web端开发者 Key，调用 load 时必填
        version: "2.0", //指定要加载的 JS API 的版本，缺省时默认为 1.4.15
      })
        .then((AMap) => {
          var map = new AMap.Map(this.$refs.map, {
            pitch: 50, //地图俯仰角度，有效范围 0 度- 83 度
            viewMode: '3D', //地图模式
            rotateEnable: true, //是否开启地图旋转交互 鼠标右键 + 鼠标画圈移动 或 键盘Ctrl + 鼠标左键画圈移动
            pitchEnable: true, //是否开启地图倾斜交互 鼠标右键 + 鼠标上下移动或键盘Ctrl + 鼠标左键上下移动
            zoom: 17, //初始化地图层级
            rotation: -15, //初始地图顺时针旋转的角度
            zooms: [2, 20], //地图显示的缩放级别范围
            center: [103.828434,36.064822], //初始地图中心经纬度
            // mapStyle: "amap://styles/macaron",
          });
          this.empData.forEach(item=>{
            // 添加标记点 设备点 经纬度
            const marker = new AMap.Marker({
            position:item.position,
            title: item.name,
            // 用户携带数据
            extData:item,
            // 自定义图标
            // icon：“图标地址”
          });
          var that = this;
          marker.on('click', function () {
            console.log(this.getExtData(), '用户携带数据');
            that.SET_ED({
              device_id:this.getExtData().id,
              engineer_id:this.getExtData().engineer_id
            })
          })
          map.add(marker); 
          })
          // 添加标记点 设备点 经纬度
          // 行政区规划
          AMap.plugin("AMap.DistrictSearch", function () {
            let polygons = [];
            var opts = {
              subdistrict: 0, //获取边界不需要返回下级行政区
              extensions: "all", //返回行政区边界坐标组等具体信息
              level: "district", //查询行政级别为 市
            };
            let district = new AMap.DistrictSearch(opts);
            district.setExtensions("all");
            district.search("兰州市", function (status, result) {
              map.remove(polygons); //清除上次结果
              polygons = [];
              var bounds = result.districtList[0].boundaries;
              if (bounds) {
                for (var i = 0, l = bounds.length; i < l; i++) {
                  //生成行政区划polygon
                  var polygon = new AMap.Polygon({
                    strokeWeight: 5,
                    path: bounds[i],
                    fillOpacity: 0.4,
                    fillColor: "#80d8ff",
                    strokeColor: "#0091ea",
                  });
                  polygons.push(polygon);
                }
              }
              map.add(polygons);
              map.setFitView(polygons); //视口自适应
            });
          });
        })
        .catch((e) => {
          // console.error(e); //加载错误提示
          return Promise.reject(e)
        });
    },
    // 请求工程设备数据
    async loadEmpData(){
      let res = await get('/dashboard/findEngineerDeviceTree');
      // console.log(res,'获取响应');
      let temp = [];
      res.data.forEach((item,index,arr)=>{
         if(item.children.length>0){
          item.children.forEach(it=>{
            temp.push(it)
          })
         }
      });
      // console.log(temp,'2222');
      this.empData = temp;
    }
  },
  async mounted() {
    await this.loadEmpData();
    this.loadMap()
  }
}
</script>
<!-- css代码 -->
<style lang="less" scoped></style>